<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request9191 from "../../../utils/request9191.js";
import recreationBottom from "../../../components/recreationBottom.vue"
import router from "../../../router/index.js";
//社团弹框
const tk =ref(false);

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const basketBall = ref(false)
//定义全局变量社团名称,社团介绍
const globalcname = ref()
const globalcintroduce = ref()
const globalheader = ref()
const globalctype = ref()

//定义社团信息数组
const clubInfo = ref([])
//获取社团全部信息
const getClubInfo = ()=>{
  request9191({
    url: '/club/getClub',
    method: 'get'
  }).then((res)=>{
    clubInfo.value=res.data.data
  })
}

//将获取到的社团名称和社团介绍传给open函数
const open=(cname,cintroduce ,cheader ,ctype)=>{
  globalcname.value=cname
  globalcintroduce.value=cintroduce
  globalheader.value=cheader
  globalctype.value=ctype
  tk.value=true
}

const come=(cname ,header , ctype)=>{
  if(sessionStorage.getItem("name") === null){
    ElMessage.error("请先登录")
    return
  }
  joinForm.value.cheader=header
  joinForm.value.cname=cname
  joinForm.value.ctype=ctype
  dialogFormVisible.value=true
}


getClubInfo()

//申请入团
const joinForm = ref({
  sname: sessionStorage.getItem("name"),
  sphone:'',
  sgender:'',
  sclass: '',
  cname:'',
  ctype:'',
  cheader:''
})

//申请入团校验
const joinFormRef =ref()
const joinFormRules = ref({
  sphone:[
    {required: true, message: "请输入您的电话号码", trigger: "blur"},
    {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的电话号码", trigger: "blur"}
  ],
  sgender: [
    {required: true, message: "请选择性别", trigger: "blur"},
  ],
  sclass:[
    {required: true, message: '请输入班级' , trigger: 'blur'}
  ]
})
//清空数据
const clearJoinInfo = () =>{
  joinForm.value.sname=''
  joinForm.value.sphone=''
  joinForm.value.sgender=''
  joinForm.value.sclass=''
  joinForm.value.cname=''
  joinForm.value.ctype=''
  joinForm.value.cheader=''
}
//提交入团信息
const submitJoin = () =>{
  if ((joinForm.value.sname === null || joinForm.value.sname === '') ||
      (joinForm.value.sclass === null || joinForm.value.sclass === '') ||
      (joinForm.value.sphone === null || joinForm.value.sphone === '') ||
      (joinForm.value.sgender === null || joinForm.value.sgender === '') ||
      (joinForm.value.cname === null || joinForm.value.cname === '') ||
      (joinForm.value.ctype ===null || joinForm.value.ctype === '') ||
      (joinForm.value.cheader === null || joinForm.value.cheader === '')){
      ElMessage.error("请填写完整")
    return
  }
    request9191({
        url:'/clubJoin/add',
        method:'post',
        data:joinForm.value
      }).then((res)=>{
        ElMessage.success("提交成功")
        dialogFormVisible.value=false
        clearJoinInfo()
      }).catch(()=>{
        ElMessage({
          type:'info',
          message:'已取消'
        })
      })
}


</script>

<template>
  <div class="recreationAll">
    <div class="top" style="display: flex">
      <div class="top-left">
        <img src="../../../assets/recreation/logo.png" style="height: 170px; width: 300px;
margin-right: 100px;"  alt="">
      </div>
      <div class="top-right">
        <ul style="display: flex">
            <li @click="router.push('/recreationClubStart')">首页</li>
            <li @click="router.push('/userclub')">活力社团</li>
            <li @click="router.push('/userActivity')">社团活动</li>
            <li @click="router.push('/userRules')">规章制度</li>
        </ul>
      </div>
    </div>
  </div>

<!--   社团内容区-->
  <section  class="features" id="features" >
    <hr>
      <div  class="container1">
        <div v-for="item in clubInfo" class="feature1">
          <div  class="feature_son"><h3>{{item.cname}}</h3>
            <el-button class="knowMore" type="primary" @click="open(item.cname , item.cintroduce , item.cheader , item.ctype)">查看社团详情</el-button>
          </div>
        </div>
    </div >
  </section>

    <!--社团详细信息-->
  <el-dialog v-model="tk"  width="420" style="text-align: center">
    <h1>{{globalcname}}</h1>
    <div style="text-align: center"><h3>介绍</h3></div>
    <hr>
    {{globalcintroduce}}
    <hr>
    <el-button class="join" type="success"   @click="come(globalcname , globalheader , globalctype)">加入我们吧！</el-button>
  </el-dialog>

<!--申请加入社团-->
  <el-dialog v-model="dialogFormVisible" title="申请入团" width="500" style="text-align: center">
    <el-form :model="joinForm" :rules="joinFormRules">
      <el-form-item label="社团名称" :label-width="formLabelWidth">
        <el-input v-model="joinForm.cname" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="社团类别" :label-width="formLabelWidth">
        <el-input v-model="joinForm.ctype" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="社团团长" :label-width="formLabelWidth">
        <el-input v-model="joinForm.cheader" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="joinForm.sname" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item label="班级" :label-width="formLabelWidth" prop="sclass">
        <el-input v-model="joinForm.sclass" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" prop="sgender">
        <el-select v-model="joinForm.sgender" placeholder="请选择性别">
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth" prop="sphone">
        <el-input v-model="joinForm.sphone" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitJoin">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <recreationBottom/>
</template>
<style scoped>
.features {
  padding: 2rem 0;
  background: #f4f4f4;
}

.features .container1 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 83%;
  margin: 0 auto;
}

.features .feature1 {
  height: 400px;
  flex: 1 1 calc(30% - 40px);
  margin: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 25%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.features .feature1 .feature_son {
  background-color: #cbb5e2;
  width: 100%;
  height: 100px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -104px;
  transition: all 0.8s;
}

.features .feature1:hover .feature_son {
  bottom: 0;
}

.features .feature1:hover {
  transform: translateY(-10px);
  background: #e0e0e0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border: #cbb5e2 2px solid;
}

.features .feature1 h3 {
  margin-bottom: 10px;
  color: white;
  font-weight: bolder;
}

.features .feature1 p {
  font-size: 0.9rem;
  /*  缩进*/
  text-indent: 2em;
  /*    行距*/
  line-height: 30px;
  font-weight: bolder;
  color: white;
}

.features .feature1:nth-child(1) {
  background-image: url("../../../assets/recreation/1.png");
  background-size: 100% 100%;
  position: relative;
}

.features .feature1:nth-child(2) {
  background-image: url("../../../assets/recreation/2.jpg");
  background-size: 100% 100%;
  position: relative;
}

.features .feature1:nth-child(3) {
  background-image: url("../../../assets/recreation/3.png");
  background-size: 100% 100%;
  position: relative;
}

.features .feature1:nth-child(4) {
  background-image: url("../../../assets/recreation/4.png");
  background-size: 100% 100%;
  position: relative;
}

.features .feature1:nth-child(5) {
  background-image: url("../../../assets/recreation/5.jpg");
  background-size: 100% 100%;
  position: relative;
}

.features .feature1:nth-child(6) {
  background-image: url("../../../assets/recreation/6.jpg");
  background-size: 100% 100%;
  position: relative;
}



a {
  text-decoration: none;
  color: inherit;
}

.top {
  display: flex;
}

.top-left {
  margin-left: 50px;
}

.top-right {
  margin-top: 40px;
  margin-left: 140px;
}
li {

  list-style: none;
  margin-right: 30px;
  cursor: pointer;
  color: #007bff;
  font-family: "Arial Narrow", sans-serif;
  font-size: 25px;
}
</style>
